<template>
  <div class="q-pa-xs row items-start q-gutter-xs">
    <q-tabs v-model="tab" dense class="text-grey" active-color="primary" indicator-color="primary" narrow-indicator>
      <q-tab name="下单" label="下单" />
      <q-tab name="开奖" label="开奖" />
    </q-tabs>
    <q-separator />
    <q-tab-panels v-model="tab" animated class="full-width">
      <q-tab-panel name="下单">
        <q-table class="full-width 指定列颜色" title="汇总表" :rows="store.总下单" :columns="columns" row-key="编号" binary-state-sort
          :rows-per-page-options="[0]" separator="cell">
          <template v-slot:top>
            <div class=" q-table__title">下单表</div>
            <q-space></q-space>
            <q-btn color="positive " icon="add" dense size="sm" label="新增" @click="store.新增下单" outline/>

          </template>
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th auto-width />
              <q-th v-for="col in props.cols" :key="col.name" :props="props">
                {{ col.label }}
              </q-th>
            </q-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td auto-width class="q-gutter-xs">
                <q-btn color="positive " icon="zoom_in" dense :to="`xianqing/${props.row.编号}`" size="sm" outline/>
                <q-btn color="negative " icon="clear" dense @click="store.delete下单(props.row.编号)" size="sm" outline/>
              </q-td>
              <q-td v-for="col in props.cols" :key="col.name" :props="props">
                {{ col.value }}
              </q-td>
            </q-tr>
          </template>

        </q-table>
      </q-tab-panel>
      <q-tab-panel name="开奖">
        <a-kaijiang></a-kaijiang>
      </q-tab-panel>
    </q-tab-panels>

  </div>
</template>

<script setup>
import { useStore } from '../stores/store'
import { ref, reactive, computed, watch, onMounted, onBeforeUnmount, onUnmounted } from "vue";
import AKaijiang from "../components/开奖.vue";

const tab = ref("下单");
const store = useStore()
onMounted(() => {
  store.读取数据()
})
const columns = [
  {
    name: "编号",
    required: true,
    label: "序号",
    align: "center",
    field: "编号",
    sortable: true,
  },
  {
    name: "下单人",
    align: "center",
    label: "下单人",
    field: "下单人",
    sortable: true,
  },
  {
    name: "地区",
    align: "center",
    label: "地区",
    field: "地区",
    sortable: true,
  },
  {
    name: "开奖日期",
    align: "center",
    label: "开奖日期",
    field: "开奖日期",
    sortable: true,
  },
  {
    name: "收总计",
    align: "center",
    label: "收总计",
    field: "收总计",
    sortable: true,
  },
  {
    name: "特码收总计",
    align: "center",
    label: "特码收总计",
    field: "特码收总计",
    sortable: true,
  },
  {
    name: "平特肖收总计",
    align: "center",
    label: "平特肖收总计",
    field: "平特肖收总计",
    sortable: true,
  },
  {
    name: "出总计",
    align: "center",
    label: "出总计",
    field: "出总计",
    sortable: true,
  },

];
</script>

<style>
.指定列颜色 td:last-child{
  color: red;
}
.指定列颜色 th:last-child{
  color: red;
}
.p2 .q-field__control {
    padding: 0 6px ;
}
.p1{
  padding: 1px !important;
}
.q-banner__actions.col-auto {
  padding-left: 2px;
}

.q-banner {
  padding: 4px 4px;
}

.q-table th,
.q-table td {
  padding: 5px 5px;
}

.apd416 {
  padding: 4px 16px;
  margin-left: 30px;
}

.圆 {
  background-color: rgb(35, 136, 245);
  color: rgb(255, 255, 255);
  font-size: 18px;
  text-align: center;
  line-height: 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin: 0 2px;
  display: block;
}

.号码 {
  width: 200px;
}

.q-tab-panel {
  padding: 2px;
}

.q-field__before,
.q-field__prepend {
  padding-right: 0px;
}

.q-field__control {
  height: 36px !important;
}

.q-field__control {
  min-height: 36px !important;
}

.q-field__marginal {
  height: 36px;
}

.q-field--auto-height.q-field--labeled .q-field__control-container {
  padding-top: 9px;
}

.q-field__label {
  top: 9px;
}

.q-field__label.ellipsis {
  overflow: visible;
}

.q-select__dropdown-icon {
  display: none;
}
</style>
<!-- <style lang="sass">
.指定列颜色
  td:last-child
    /* 最后一列的背景颜色 */
    color:
</style> -->

<!-- 生肖，顺序为 兔 >虎 >牛 >鼠 >猪 >狗 >鸡 >猴 >羊 >马 >蛇 >龙，依顺序将49个号码分为12个生肖，具体如下：
• 兔：01、13、25、37、49
• 虎：02、14、26、38
• 牛：03、15、27、39
• 鼠：04、16、28、40
• 猪：05、17、29、41
• 狗：06、18、30、42
• 鸡：07、19、31、43
• 猴：08、20、32、44
• 羊：09、21、33、45
• 马：10、22、34、46
• 蛇：11、23、35、47
• 龙：12、24、36、48 -->


